<template>
	<view>
		<fa-navbar title="资产转移"></fa-navbar>
		<scroll-view class="pb-6" scroll-y="true">
			<u-gap height="40" bg-color="#F6F8FB"></u-gap>
			<view class="col-gray flex-center" style="width: 100%; height: 264rpx;">
				<view v-if="TransferState != 'ASSET_TRANSFER_0003'">
					<view class="height-20 flex-center h1-font">
						<image v-if="TransferState == 'ASSET_TRANSFER_0002'" class="titimage" src="../../static/images/item-asset-transferred-progress.svg"></image>
						<image v-else class="titimage" src="../../static/images/item-asset-transferred.svg"></image>
						<text class="ml-m1 h1-font">{{TransferStateText}}</text>
					</view>
					<view class="mt-2 h3-font">请在{{CreateTime}}前完成转移</view>
				</view>
				<view v-else>
					<view class="height-20 flex-center h1-font">
						<image class="titimage" src="../../static/images/item-asset-transferred-complete.svg"></image>
						<text class="ml-m1 h1-font">转移完成</text>
					</view>
					<view class="mt-2 h3-font">已到达目标房产</view>
				</view>
			</view>
			<u-gap class="mt-1" height="40" bg-color="#F6F8FB"></u-gap>
			<view class="pl-1 mt-m24 h1-font">
				<view>转移进度</view>
				<view class="mt-3 mb-m24 h1-font">
					<uni-steps :options="list" active-color="#007AFF" :active="active" />
				</view>
				<u-gap height="5" bg-color="#F6F8FB"></u-gap>
				<view class="flex-start height-80 h3-font">
					<view class="m-col6">操作员</view>
					<view>{{ApplyUserName}}</view>
				</view>
			</view>
			<u-gap height="40" bg-color="#F6F8FB"></u-gap>
			<view>
				<view class="pl-1 height-80 flex-start h1-font">转移信息</view>
				<view class="pl-1">
					<view>
						<view class="flex-start height-104">
							<view class="m-col6">当前所属房产</view>
							<view>{{OrgName}}</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
					<view>
						<view class="flex-start height-104">
							<view class="m-col6">目标房产</view>
							<view>{{TargetOrgName}}</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
					<view>
						<view class="flex-start height-104">
							<view class="m-col6">转移时间</view>
							<view>{{DayLimit}}天</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
					<view>
						<view class="flex-start height-104">
							<view class="m-col6">备注</view>
							<view>{{Describe}}</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
				</view>
			</view>
			<u-gap height="40" bg-color="#F6F8FB"></u-gap>
			<view>
				<view class="pl-1 height-80 flex-start h1-font">资产信息</view>
				<u-gap height="5" bg-color="#F6F8FB"></u-gap>
				<view v-for="item of Assets" :key="item.AssetGuid">
					<view class="pl-1 pr-1">
						<view class="h5-font-light-gray pl-1 height-80 flex-start">{{item.EpcId}}</view>
						<u-gap height="40" bg-color="#F6F8FB"></u-gap>
					</view>
					<view class="flex-start-top pl-1 mt-m2 mb-m2">
						<image :src="item.ImgUrls.length > 0 ? item.ImgUrls[0]: '/static/images/nopic.png'" mode="aspectFill" style="width: 128rpx;height: 128rpx;"></image>
						<view class="pl-1 pr-1 flex-column-tb" style="width: 600rpx;height: 128rpx;">
							<view class="h3-font">{{item.AssetName}}</view>
							<view class="h4-font-light-gray">{{item.OrgName}}</view>
							<view class="h4-font-light-gray flex-between">
								<view>{{item.AssetTypeText}}</view>
								<view>{{item.Num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="TransferState != 'ASSET_TRANSFER_0003'" class="bottom-layout pl-1 pr-1">
			<view class="flex-between-end">
				<view class="flex-between-end">
					<u-button class="btn-transfert" shape="circle" v-if="TransferState === 'ASSET_TRANSFER_0001'" @click="toggleMessage">取消转移</u-button>
					<u-button v-if="Guid" class="btn" shape="circle" @click="toHandle">处置</u-button>
				</view>
				
			</view>
		</view>
		<u-modal
			v-model="showPopup"
			content="确认后转移计划将中止" 
			title="确认取消转移？"
			:title-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:content-style="{'font-size': '32rpx', 'color': '#4F5053'}"
			:cancel-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:confirm-style="{'font-size': '36rpx', 'color': '#2E73E5'}"
			:show-cancel-button="true"
			cancel-text="再想想" 
			@confirm="dialogConfirm"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import tStep from '@/components/uni-steps/uni-steps.vue'
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			faNavbar,
			tStep,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		data() {
			return {
				active: 0,
				list: [{
					title: '提交转移',
					desc: '',
					active: false
				}, {
					title: '转移出库',
					desc: '',
					active: false
				}, {
					title: '转移完成',
					desc: '',
					active: false
				}],
                Guid:undefined,
				Assets: [],
				HandleGuid: undefined,
				CreateTime: 0,
				ApproveState: undefined,
				ApproveStateText: undefined,
				OrgName: undefined,
				Describe: undefined,
				DayLimit: 0,
				TargetOrgName: undefined,
				ApplyUserName: undefined,
				TransferState: undefined,
				TransferStateText: undefined,
				cuOrgGuid:undefined,
				showPopup: false
			}
		},
		onLoad(options) {
			// if (options.hasOwnProperty("guid")) {
			// 	this.Guid = options.guid;
			// }
			if (options.hasOwnProperty("cuOrgGuid")) {
				this.cuOrgGuid = options.cuOrgGuid;
			}
			this.getHandleDetail(options.handleGuid);
		},
		methods: {

			// 获取资产处置详情
			getHandleDetail(guid) {
				let params = {
					ID: guid
				}
				this.$api.getHandleDetail(params)
					.then(res => {
						if (res.code === 0) {
							this.Assets = res.data.Assets
							this.Guid = res.data.Assets[0].AssetGuid;
							this.HandleGuid = res.data.HandleGuid
							this.CreateTime = res.data.CreateTime
							this.ApproveState = res.data.ApproveState
							this.ApproveStateText = res.data.ApproveStateText
							this.OrgName = res.data.OrgName
							this.Describe = res.data.Describe
							this.DayLimit = res.data.DayLimit
							this.TargetOrgName = res.data.TargetOrgName
							this.ApplyUserName = res.data.ApplyUserName
							this.TransferState = res.data.TransferState
							switch (this.TransferState) {
								case "ASSET_TRANSFER_0004": //取消转移
									this.TransferStateText = "取消转移"
									break;
								case "ASSET_TRANSFER_0003": //转移完
									this.active = 2
									this.TransferStateText = "转移完成"
									break;
								case "ASSET_TRANSFER_0002": //转移中
									this.active = 1
									this.TransferStateText = "转移中"
									break;
								case "ASSET_TRANSFER_0001": //待转移
									this.active = 0
									this.TransferStateText = "待转移"
									break;
							}

							if (res.data.CreateTime != 0) {
								if (typeof(res.data.DayLimit) == "number") {
									this.CreateTime = SOtime.time3(res.data.CreateTime + res.data.DayLimit * 24 * 60 * 60 * 1000)
								} else {
									this.CreateTime = SOtime.time3(res.data.CreateTime)
								}
							}
						}
					})
					.catch(err => console.error(err));
			},
			// 取消转移
			cancelTransfer(guid) {
				let params = {
					ID: guid
				}
				this.$api.cancelTransfer(params)
					.then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								title: '取消转移成功',
							})
							if (this.Guid) {
								this.toAssetDetail();
							}
						} else {
							this.$refs.uToast.show({
								title: '取消转移失败',
							})
						}
					})
					.catch(err => console.error(err));
			},
			
			/**
			 * 打开消息提示
			 * @param {Object} type
			 */
			toggleMessage() {
				this.showPopup = true
			},
			
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				this.cancelTransfer(this.HandleGuid)
				this.showPopup = false
			},
			
			toAssetDetail() {
				uni.redirectTo({
					url: `/pages/manage/itemAssetDetail?id=${this.Guid}`
				})
			},
			
			toHandle() {
				let link = `/pages/handle/assetHandle?guid=${this.Guid}&handleGuid=${this.HandleGuid}`
				if (this.cuOrgGuid) {
					link = `${link}&cuOrgGuid=${this.cuOrgGuid}`
				}
				uni.redirectTo({
					url: link
				})
			},
		}
	}
</script>

<style lang="scss">
	.titimage {
		width: 62rpx;
		height: 54rpx;
	}

	.line-icon {
		width: 88rpx;
		height: 88rpx;
		background-color: #000000;
	}

	.time-line {
		position: relative;
		display: flex;
		align-items: center;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
	}
	.bottom-layout {
		width: 100%;
		height: 120rpx;
		border-top-style: 1rpx solid;
		background-color: #FFFFFF;
		bottom: 0; //可以更改为自己的需求距离底部的长度
		position: fixed;
		align-items: center;
	
		.operated-record-hove {
			color: #2E73E5;
		}
		
		.btright {
			width: 100%;
			height: 120rpx;
			align-items: right;
		}
	
		.btn {
			width: 212rpx;
			height: 80rpx;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			color: white;
		}
		
		.btn-transfert {
			width: 212rpx;
			height: 80rpx;
			margin-right: 20rpx;
			color: #3278E6;
			border: 1px solid #3278E6;
		}
	}
</style>
